import echarts, { ECOption } from '@/components/Echarts/config';
import { Dashboard } from '@/api/interface/dashboard';
import dayjs from 'dayjs';

const month = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
];

const lastYear = dayjs().subtract(1, 'year').year();
const thisYear = dayjs().year();

export const newCasesOptionsFn = (
  data: Dashboard['newCases'],
  isDark: boolean,
  rtl: boolean
): ECOption => {
  return {
    grid: { top: 35, left: 70, right: 40, bottom: 60 },
    legend: {
      right: rtl ? null : 40,
      left: rtl ? 40 : null,
      icon: 'rect',
      // data: [{ name: lastYear }, { name: thisYear }],
      padding: [0, 0, 10, 0],
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 40,
      textStyle: { color: isDark ? '#cecece' : '#8d97a2' },
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        const content = params
          .map(
            (param) => `
          <div style="margin: 0 0 5px 0;">
            ${param.marker}
            <span style="margin: 0 ${rtl ? '3px 0 20px;' : '20px 0 3px;'}">${
              param.seriesName
            }</span>
            <span style="font-weight: bold;">${param.value}</span>
          </div>`
          )
          .join('');
        return `
          <div>
            <div style="margin: 0 0 5px 0;">${params[0].name}</div>
            ${content}
          </div>`;
      },
    },
    xAxis: {
      inverse: rtl,
      type: 'category',
      boundaryGap: false,
      data: month,
      axisLine: {
        lineStyle: { color: isDark ? '#989a9c' : '#e9e9e9' },
      },
      axisLabel: {
        margin: 15,
        color: isDark ? '#cecece' : '#8d97a2',
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: { type: 'dashed', color: isDark ? '#484753' : '#f2f3f5' },
      },
      axisLabel: {
        margin: 20,
        color: isDark ? '#cecece' : '#8d97a2',
      },
    },
    series: [
      {
        name: lastYear,
        data: data?.lastYear.map((item) => item.value),
        // data: [0, 170, 140, 150, 210, 140, 120, 80, 170, 190, 120, 0],
        type: 'line',
        symbolSize: 15,
        smooth: true,
        showSymbol: true,
        symbol: 'circle',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: isDark
                ? 'rgba(30, 214, 255, 0.2)'
                : 'rgba(240, 252, 255, 1)',
            },
            {
              offset: 1,
              color: isDark
                ? 'rgba(234, 234, 234, 0.2)'
                : 'rgba(250, 254, 255, 1)',
            },
          ]),
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: '#1ED6FF' },
            { offset: 1, color: '#a9f0ff' },
          ]),
        },
        lineStyle: {
          width: 5,
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#1ED6FF' },
            { offset: 1, color: '#a9f0ff' },
          ]),
        },
      },
      {
        name: thisYear,
        data: data?.thisYear.map((item) => item.value),
        // data: [150, 120, 210, 60, 80, 190, 150, 250, 130, 90, 190, 260],
        type: 'line',
        symbolSize: 15,
        smooth: true,
        showSymbol: true,
        symbol: 'circle',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: isDark
                ? 'rgba(61, 241, 155, 0.1)'
                : 'rgba(230, 252, 247, 1)',
            },
            {
              offset: 1,
              color: isDark
                ? 'rgba(234, 234, 234, 0.2)'
                : 'rgba(250, 254, 255, 1)',
            },
          ]),
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: '#36F097 ' },
            { offset: 1, color: '#b4f8d9' },
          ]),
        },
        lineStyle: {
          width: 5,
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#36F097 ' },
            { offset: 1, color: '#b4f8d9' },
          ]),
        },
      },
    ],
  };
};

export const violationStatusFn = (
  data: Dashboard['violationStatus'],
  isDark: boolean,
  rtl: boolean,
  t
): ECOption => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: function (params) {
        const content = params
          .map(
            (param: { marker: any; seriesName: any; value: any }) => `
            <div style="margin: 0 0 5px 0; display: flex; align-items: center; position: relative;width:160px;">
              ${param.marker}
              <span style="margin: 0 ${rtl ? '6px 0 20px' : '20px 0 3px'};">
               ${param.seriesName}

              </span>
              <span style="font-weight: bold; position: absolute; right: ${
                rtl ? '90%' : '0'
              }">${param.value}</span>
            </div>`
          )
          .join('');
        return content;
      },
    },
    legend: {
      icon: 'rect',
      textStyle: { color: isDark ? '#fff' : '#333' },
      bottom: 10,
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 25,
    },
    grid: {
      top: '5%',
      left: '3%',
      right: '4%',
      bottom: '15%',
      containLabel: true,
    },
    xAxis: {
      inverse: rtl,
      type: 'category',
      // boundaryGap: false,
      data: month,
      axisLine: {
        lineStyle: { color: isDark ? '#989a9c' : '#e9e9e9' },
      },
      axisLabel: {
        margin: 15,
        color: isDark ? '#cecece' : '#8d97a2',
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: { type: 'dashed', color: isDark ? '#484753' : '#f2f3f5' },
      },
      axisLabel: {
        margin: 15,
        color: isDark ? '#cecece' : '#8d97a2',
      },
    },
    series: [
      {
        name: t['violationStatusFn.Transferred'],
        type: 'bar',
        barWidth: 25,
        stack: 'Ad',
        data: data.map((item) => item?.transferred),
        // data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#7E68FF' },
          { offset: 1, color: 'rgba(126, 104, 255, 0.2)' },
        ]),
      },
      {
        name: t['violationStatusFn.Closed'],
        type: 'bar',
        barWidth: 25,
        stack: 'Ad',
        data: data.map((item) => item?.closed),
        // data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#D4D9DB' },
          { offset: 1, color: 'rgba(212, 217, 219, 0.2)' },
        ]),
      },
      {
        name: t['violationStatusFn.Assigned'],
        type: 'bar',
        barWidth: 25,
        stack: 'Ad',
        data: data.map((item) => item?.assigned),
        // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#FFE34E' },
          { offset: 1, color: 'rgba(255, 227, 78, 0.2)' },
        ]),
      },

      {
        name: t['violationStatusFn.InProgress'],
        type: 'bar',
        barWidth: 25,
        stack: 'Ad',
        data: data.map((item) => item?.inProgress),
        // data: [120, 132, 101, 134, 90, 230, 210, 20, 132, 101, 134, 90, 230],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#36F097' },
          { offset: 1, color: 'rgba(54, 240, 151, 0.2)' },
        ]),
      },
      {
        name: t['violationStatusFn.UnderReview'],
        type: 'bar',
        barWidth: 25,
        stack: 'Ad',
        data: data.map((item) => item?.underReview),
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#1ED6FF' },
          { offset: 1, color: 'rgba(30, 214, 255, 0.2)' },
        ]),
        // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330],
      },
    ],
  };
};

export const entitiesFn = (
  data: Dashboard['top5Entities'],
  isDark: boolean,
  rtl: boolean
): ECOption => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: function (params) {
        const content = params
          .map(
            (param) => `
          <div>
            ${param.marker}
            <span style="font-weight: bold; margin: 0 ${
              rtl ? '5px 0 0;' : '0 0 5px;'
            }">
            ${param.value}
            </span>
          </div>`
          )
          .join('');
        return `
          <div>
            <div style="margin: 0 0 5px 0;">${params[0].name}</div>
            ${content}
          </div>`;
      },
    },
    grid: {
      top: '2%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      inverse: rtl,
      type: 'value',
      boundaryGap: [0, 0.01],
      splitLine: {
        show: true,
        lineStyle: { type: 'dashed', color: isDark ? '#484753' : '#f2f3f5' },
      },
      axisLabel: {
        margin: 10,
        color: isDark ? '#cecece' : '#8d97a2',
      },
    },
    yAxis: {
      type: 'category',
      data: data
        .map((item) => item.entityVoo?.[rtl ? 'nameAr' : 'name'])
        .reverse(),
      axisLine: {
        lineStyle: { color: isDark ? '#989a9c' : '#e9e9e9' },
      },
      axisLabel: {
        color: isDark ? '#cecece' : '#8d97a2',
        formatter: (value) => {
          if (value.length > 6) return value.slice(0, 6) + '...';
          return value;
        },
      },
    },
    series: [
      {
        type: 'bar',
        barWidth: 25,
        label: {
          show: true,
          position: 'right',
          offset: [5, 0],
          color: isDark ? '#cecece' : '#8d97a2',
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#36F097' },
            { offset: 1, color: 'rgba(54, 240, 151, 0.2)' },
          ]),
        },
        data: data.map((item) => item.value).reverse(),
      },
    ],
  };
};

export const sourcesFn = (
  data: Dashboard['top5Source'],
  isDark: boolean,
  rtl: boolean
): ECOption => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: function (params) {
        const content = params
          .map(
            (param) => `
          <div>
            ${param.marker}
            <span style="font-weight: bold; margin: 0 ${
              rtl ? '5px 0 0;' : '0 0 5px;'
            }">
            ${param.value}
            </span>
          </div>`
          )
          .join('');
        return `
          <div>
            <div style="margin: 0 0 5px 0;">${params[0].name}</div>
            ${content}
          </div>`;
      },
    },
    grid: {
      top: '2%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      inverse: rtl,
      type: 'value',
      boundaryGap: [0, 0.01],
      splitLine: {
        show: true,
        lineStyle: { type: 'dashed', color: isDark ? '#484753' : '#f2f3f5' },
      },
      axisLabel: {
        margin: 10,
        color: isDark ? '#cecece' : '#8d97a2',
      },
    },
    yAxis: {
      type: 'category',
      data: data.map((item) => item.local.value[rtl ? 'ar' : 'en']).reverse(),
      axisLine: {
        lineStyle: { color: isDark ? '#989a9c' : '#e9e9e9' },
      },
      axisLabel: {
        color: isDark ? '#cecece' : '#8d97a2',
        formatter: (value) => {
          if (value.length > 6) return value.slice(0, 6) + '...';
          return value;
        },
      },
    },
    series: [
      {
        type: 'bar',
        barWidth: 25,
        label: {
          show: true,
          position: 'right',
          offset: [5, 0],
          color: isDark ? '#cecece' : '#8d97a2',
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#1ED6FF' },
            { offset: 1, color: 'rgba(30, 214, 255, 0.2)' },
          ]),
        },
        data: data.map((item) => item.value).reverse(),
      },
    ],
  };
};

export const complainantFn = (
  data: Dashboard['complainantRoles'],
  isDark: boolean,
  rtl: boolean
): ECOption => {
  const gradientColors = [
    ['#FFE34E', 'rgba(255, 227, 78, 0.2)'],
    ['#7E68FF', 'rgba(126, 104, 255, 0.2)'],
    ['#36F097', 'rgba(54, 240, 151, 0.2)'],
    ['#1ED6FF', 'rgba(30, 214, 255, 0.2)'],
    ['#D4D9DB', 'rgba(212, 217, 219, 0.2)'],
  ];

  return {
    tooltip: {
      trigger: 'item',
      borderWidth: 0,
      formatter: function (params) {
        const percent = (
          (params.value / data.reduce((sum, item) => sum + item.value, 0)) *
          100
        ).toFixed(2);
        return `<div style="display:flex">${params.marker} ${params.name}：${params.value} <div style="direction: ltr;">(${percent}%)</div></div>`;
      },
    },
    legend: {
      icon: 'rect',
      right: '8%',
      orient: 'vertical',
      textStyle: { color: isDark ? '#cecece' : '#8d97a2' },
      top: 50,
      itemGap: 25,
      itemWidth: 12,
      itemHeight: 12,
    },
    series: [
      {
        type: 'pie',
        top: 30,
        radius: ['45%', '70%'],
        center: ['40%', '40%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          fontSize: 12,
          color: isDark ? '#cecece' : '#8d97a2',
        },
        labelLine: {
          show: true,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 15,
            fontWeight: 'bold',
          },
        },
        data: data.map((item, index) => {
          return {
            value: item.value,
            name: item.local.value[rtl ? 'ar' : 'en'],
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: gradientColors[index % gradientColors.length][0],
                  },
                  {
                    offset: 1,
                    color: gradientColors[index % gradientColors.length][1],
                  },
                ],
              },
            },
          };
        }),
      },
    ],
  };
};

export const violationTypesFn = (
  data: Dashboard['top5ViolationTypes'],
  isDark: boolean,
  rtl: boolean
): ECOption => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: function (params) {
        const content = params
          .map(
            (param) => `
          <div>
            ${param.marker}
            <span style="font-weight: bold; margin: 0 ${
              rtl ? '5px 0 0;' : '0 0 5px;'
            }">
            ${param.value}
            </span>
          </div>`
          )
          .join('');
        return `
          <div>
            <div style="margin: 0 0 5px 0;">${params[0].name}</div>
            ${content}
          </div>`;
      },
    },
    grid: {
      top: '2%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      inverse: rtl,
      type: 'value',
      boundaryGap: [0, 0.01],
      splitLine: {
        show: true,
        lineStyle: { type: 'dashed', color: isDark ? '#484753' : '#f2f3f5' },
      },
      axisLabel: {
        margin: 10,
        color: isDark ? '#cecece' : '#8d97a2',
      },
    },
    yAxis: {
      type: 'category',
      data: data.map((item) => item.local.value[rtl ? 'ar' : 'en']).reverse(),
      axisLine: {
        lineStyle: { color: isDark ? '#989a9c' : '#e9e9e9' },
      },
      axisLabel: {
        color: isDark ? '#cecece' : '#8d97a2',
        formatter: (value) => {
          if (value.length > 6) return value.slice(0, 6) + '...';
          return value;
        },
      },
    },
    series: [
      {
        type: 'bar',
        barWidth: 25,
        label: {
          show: true,
          position: 'right',
          offset: [5, 0],
          color: isDark ? '#cecece' : '#8d97a2',
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#7E68FF' },
            { offset: 1, color: 'rgba(126, 104, 255, 0.2)' },
          ]),
        },
        data: data.map((item) => item.value).reverse(),
      },
    ],
  };
};

export const assigneesFn = (
  data: Dashboard['top10Assignees'],
  isDark: boolean,
  rtl: boolean
): ECOption => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: function (params) {
        const content = params
          .map(
            (param) => `
          <div>
            ${param.marker}
            <span style="font-weight: bold; margin: 0 ${
              rtl ? '5px 0 0;' : '0 0 5px;'
            }">
            ${param.value}
            </span>
          </div>`
          )
          .join('');
        return `
          <div>
            <div style="margin: 0 0 5px 0;">${params[0].name}</div>
            ${content}
          </div>`;
      },
    },
    grid: {
      top: '2%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      inverse: rtl,
      type: 'value',
      boundaryGap: [0, 0.01],
      splitLine: {
        show: true,
        lineStyle: { type: 'dashed', color: isDark ? '#484753' : '#f2f3f5' },
      },
      axisLabel: {
        margin: 10,
        color: isDark ? '#cecece' : '#8d97a2',
      },
    },
    yAxis: {
      type: 'category',
      data: data.map((item) => item.key).reverse(),
      axisLine: {
        lineStyle: { color: isDark ? '#989a9c' : '#e9e9e9' },
      },
      axisLabel: {
        color: isDark ? '#cecece' : '#8d97a2',
        formatter: (value) => {
          if (value.length > 6) return value.slice(0, 6) + '...';
          return value;
        },
      },
    },
    series: [
      {
        type: 'bar',
        barWidth: 20,
        label: {
          show: true,
          position: 'right',
          offset: [5, 0],
          color: isDark ? '#cecece' : '#8d97a2',
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#FFE34E' },
            { offset: 1, color: 'rgba(255, 227, 78, 0.2)' },
          ]),
        },
        data: data.map((item) => item.value).reverse(),
      },
    ],
  };
};
